<template>
	<view>
		<view class="top-view">
			<view class="main-title">{{ydtype}}约定</view>
			<view class="info-view">小约定帮你搞定!</view>
			<image class="fu-image" src="../../../static/h5/fu.png" mode="aspectFit"></image>
		</view>
		
		<navigator url="../../about/detail/detail">
		<view class="uni-list-cell newCell" hover-class="uni-list-cell-hover">
			<view class="cellDb">服务介绍</view>
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
			</view>
		</view>
		</navigator>
		
		
		<view class="page-sec-head">
			<h3 class="page-sec-title">价格</h3>
		</view>
		<view class="notice-view">
			<p>收费标准:50字以内(包含字符)2元,超过50字每字0.2元.</p>
			
		</view>
		
		<view class="page-sec-head">
			<h3 class="page-sec-title">指定签署人</h3>
		</view>
		
		<navigator url="../ydperson/ydperson">
		<view class="uni-list-cell newCell" hover-class="uni-list-cell-hover">
			<view class="cellDb">{{ydPhoneStr}}</view>
				<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
			</view>
		</view>
		</navigator>
		
		<view class="newCell">
			<view class="cellDb">是否加密</view><view class="cellDb quest-icon" @tap="questAct">?</view>
			<switch color="#EF473A" @change="switchchange" />
		</view>
		
		<view class="page-sec-head">
			<h3 class="page-sec-title">约定内容</h3>
		</view>
		
		<view class="content-view">
			<view class="content-title">{{ydtype}}约定: ¥ <label class="redFont">{{ydCost}}</label>元</view>
			
			<textarea class="contentTA" @input="textInput"></textarea>
		</view>
		
		<view class="notice-view">支付宝支付申请中,暂不支持预约!</view>
		
		<button type="primary" @tap="ydpreview">预约服务</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ydtype:"祝福",
				ydPhone:"",
				contentLengh:0
			};
		},
		onLoad:function(options){
			if(options.ydtype!="undefined")
			{
				this.ydtype = options.ydtype;
			}
		},
		onShow:function(){
			var that = this;
			console.log("onshow")
			uni.getStorage({
				key: 'ydPhone',
				success: function (res) {
					console.log("storage:"+res.data);
					that.ydPhone = res.data;
				},
				fail:function(err){
					console.log("storage:"+err)
				}
			});
			
		},
		computed:{
			ydPhoneStr(){
				return this.ydPhone.length?this.ydPhone:'指定';
			},
			ydCost(){
				if(this.contentLengh<=50)
				{
					return 2;
				}
				var over = this.contentLengh-50;
				var overPrice = (this.contentLengh-50)*0.2;
				var res = 2+overPrice;
				res = this.toDecimal(res);
				return res;
			}
		},
		methods:{
			toDecimal:function(x) { 
			   var f = parseFloat(x); 
			   if (isNaN(f)) { 
				 return; 
			   } 
			   f = Math.round(x*100)/100; 
			   return f; 
			 }, 


			switchchange:function(e){
				console.log('change:'+JSON.stringify(e))
				console.log(e.target.value)
			},
			ydpreview:function(e){
				/*
				uni.showToast({
					title:"预览"
				})*/

				uni.showToast({
					icon:"none",
					title:"支付宝支付申请中,申请通过后即可使用!"
				})
				
				/*
				uni.showToast({
					icon:"loading",
					title:"加载中"
				})*/
			},
			questAct:function(e){
				uni.showModal({
					showCancel:false,
					title:"加密后双方需要输入口令才能查看约定内容"
				})
			},
			textInput:function(e){
				var value = e.target.value;
				var length = value.length;
				// console.log(":"+value);
				this.contentLengh = length;
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #f1f1f1;
	}
	
	.redFont{
		color: red;
		font-size: 50upx;
		font-weight: 700;
	}
	
	.cellDb{
		display: inline-block;
		font-size: 30upx;
		margin-left: 25upx;
	} 
	
.top-view{
	background-color: #ef473a;
	height: 300upx;
	width: 100vw;
}

.main-title{
	color: white;
	font-size: 90upx;
	font-weight: 330;
	padding-top: 40upx;
	height: 130upx;
	margin-left: 30upx;
	
}
.info-view{
	font-size: 30upx;
	color: white;
	margin-top: 10upx;
	margin-left: 30upx;
}

.fu-image
{
	position: absolute;
	top: 25upx;
	right: 25upx;
	width: 250upx;
	height: 250upx;
	/* background-color: #8F8F94; */
}

	.page-sec-head
	{
		width: 100%;
		margin: 30upx 0 10upx 0;
	}
	.page-sec-title
	{
		font-size: 30upx;
		/* background-color: #8F8F94; */
		width: 675upx;
		margin-left: 25upx;
		text-align: left;
		padding-left: 25upx;
		border-left: 10upx solid #ee0000;
		color: #505050;
		
	}
	
	.newCell{
		/* border-top: 1upx solid #e0e0e0; */
		/* border-bottom: 1upx solid #e0e0e0; */
		padding: 20upx 0;
		background-color: white;
	}
	
	.quest-icon{
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		border: 1px solid #505050;
		text-align: center;
	}
	
	.newCell switch
	{
		float: right;
		margin-right: 20upx;
	}
	
	.content-view
	{
		border-top: 1upx solid #E0E0E0;
		background-color: white;
		padding-bottom: 1upx;
	}
	
	.content-title{
		margin-left: 25upx;
		font-size: 30upx;
		margin-top: 20upx;
		
	}
	
	.contentTA{
		width: 700upx;
		background-color: #fcfcfc;
		height: 200upx;
		margin: 25upx;
	}
	
	.notice-view{
		color: red;
		font-size: 28upx;
		padding: 25upx;
	}
	
	button{
		/* background-color: #EF473A; */
		background-color: #8F8F94;
		margin: 25upx;
		font-size: 30upx;
	}
	
</style>
